<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="/vue/lib/vue.js"></script>

</head>

<body>
  <div id="box">
    <h1 id="h1">{{na}}</h1>
    <!-- v-model 用于绑定，此时如果输入框东西变了那么h1也会变，可以实时更新 -->
    <!-- mvm双向绑定机构
    model 数据 vue中，实例绑定的数据 
  vm viewmodel  监听器
view页面，页面展示的数据，浏览器-->
    <input type="text" v-model="msg">{{msg}}
    <h2>---------------------------------------------------------------------------------
    </h2>
    <form> qq：<input type="text" v-model="usuerlist.qq"><br>
      <input type="button" value="tijiao" @click="">
      <!-- <button @click="sbm">提交</button>不出东西 -->
    </form>
  </div>
  <script>
    var vue = new Vue({
      el: '#box',
      data: {
        na: 'name',
        age: 18,
        msg: '邵美丽',
        usuerlist: {}
      },
      methods: {
        sbm() {
          // console.log(123);
          // console.log(this.usuerlist);
          // 
        }
      },
      // 初始化阶段
      beforeCreate() {
        // 生命周期的第一个函数，这个函数在执行vue实例的时候仅仅完成了自身事件的绑定
        // 和生命周期函数的初始化工作，当时还没有el，data，methods这些相关属性
        console.log(this.msg);
      },
      created() {
        // 生命周期的第二个函数，这个函数在执行vue实例的时候已经初始化了data和methods这些相关属性
        console.log(this.msg);
      },

      beforeMount() {
        //  生命周期的第三个函数，这个函数在执行vue将el中指定范围作为模板翻译
        console.log('beforemount' + document.getElementById('h1').innerText);
      },
      mounted() {
        // 生命周期的第四个函数，这个函数执行过程中，已经将数据渲染到界面中并且已经更新页面
        console.log('mounted' + document.getElementById('h1').innerText);
        // this.sbm()
      },
      // 运行阶段
      beforeUpdate() {
        // 第五个函数，这个函数在data中数据发生变化时执行，
        // 这个事件执行的仅仅只是vue实例中data数据变化页面显示的仍然是原始数据

        console.log('beforedated' + this.msg);
        console.log("beforeUpdate" + document.getElementById("h1").innerText)

      },
      updated() {
        // 第六个函数这个函数在data中数据发生变化时执行，页面中数据已经和data中的数据保持一致了
        console.log('udated' + this.msg);
      },
      // 销毁阶段
      beforeDestory() {
        // 7.生命周期的第7个函数  该函数执行的时候,vue中所有的数据  methods component都没有销毁

        console.log('执行了销毁前');
      },
      destoryed() {
        // 8.生命周期的第8个函数  该函数执行的时候,vue中实例彻底销毁

        console.log('执行了销毁后的destoryed');
      }



    })
  </script>
</body>

</html>